<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>续费管理</title>
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="dist/styles/iview.css">
    <style>
        html,body,#app{width:100%;height:100%;position: relative;};
        [v-cloak] {
            display: none;
        }
        .header{
            position: absolute;left: 0;right: 0;top: 0;height: 60px;
            padding: 10px;
            line-height: 40px;
        }
        .header > div{float: left;margin:0 10px 0 10px;}
        .table-body{
            position: absolute;left: 10px;right: 10px;top: 60px;bottom: 10px;
        }
    </style>
</head>
<body>
    <div id='app'>
        <div class="header">
            <div class="label">
                搜索类型:
            </div>
            <div style="width:100px;position:relative;">
                <i-select v-model="queryType">
                    <i-option value="1">用户账号</i-option>
                    <i-option value="2">设备序号</i-option>
                </i-select>
            </div> 
            <div class="label">
                充值状态:
            </div>
            <div style="width:100px;position:relative;">
                <i-select v-model="chargeStatus">
                    <i-option value="0">全部</i-option>
                    <i-option value="1">未充值</i-option>
                    <i-option value="2">已充值</i-option>
                </i-select>
            </div>
            <div class="label">
                搜索内容:
            </div>
            <div>
                <i-input v-model.trim="searchValue"></i-input>
            </div>
            <div>
                <Checkbox v-model="isIncludeSub">是否包含下级</Checkbox>
            </div>
            <div>
                <i-button  :loading="loading" @click="handleQuery">查询</i-button>
            </div>
            <div>
                <i-button type="primary" @click="modal=true" :disabled="isDisabled">充值</i-button>
            </div>
        </div>
        <div class="table-body">
            <i-Table border ref="selection" :columns="columns" :data="tableData" :height="tHeight" @on-selection-change="onSelection"></i-Table>
        </div>
        <Modal v-model="modal" width="400">
            <p slot="header" style="color:#2D8CF0;text-align:center">
                操作
            </p>
            <div> 
                <Row style="margin: 10px 0">
                    <i-col span="6" style="height: 100%;line-height:32px;text-align:center">操作类型:</i-col>
                    <i-col span="12" style="height: 100%;line-height:32px;">
                        <i-select v-model="activeType">
                            <i-option value="1">充值</i-option>
                            <i-option value="0">取消充值</i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="6" style="height: 100%;line-height:32px;text-align:center">选中个数:</i-col>
                    <i-col span="12" style="height: 100%;line-height:32px;">
                        {{selectionArray.length}}
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="6" style="height: 100%;line-height:32px;text-align:center">是否终身:</i-col>
                    <i-col span="12" style="height: 100%;line-height:32px;">
                        <Checkbox v-model="isLifelong"></Checkbox>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="6" style="height: 100%;line-height:32px;text-align:center">选择时间:</i-col>
                    <i-col span="17" style="height: 100%;line-height:32px;">
                        <Radio-Group v-model="years">
                            <Radio label="1年" :disabled="isLifelong"></Radio>
                            <Radio label="2年" :disabled="isLifelong"></Radio>
                            <Radio label="3年" :disabled="isLifelong"></Radio>
                            <Radio label="4年" :disabled="isLifelong"></Radio>
                            <Radio label="5年" :disabled="isLifelong"></Radio>
                        </Radio-Group>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="6" style="height: 100%;line-height:32px;text-align:center">选择日期:</i-col>
                    <i-col span="17" style="height: 100%;line-height:32px;">
                        <date-picker type="date" v-model="overdueDate" :disabled="isLifelong" style="width: 100%"></date-picker>
                    </i-col>
                </Row>
            </div>
            <div slot="footer" style="padding:6.5px 15px;">
              <i-button style="width:100%;" type="primary" @click="handlerChargeDevices">提交</i-button>
            </div>
        </Modal>
    </div>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="./js/gps51-jquery.js"></script>
    <script src="./js/js.cookie.min.js"></script>
    <script src="./js/dateformat.js"></script>
    <script src="./js/util.js"></script>
    <script src="js/config.js"></script>
    <script>
        var token = utils.getParameterByName("token");
        var userName = utils.getParameterByName("username");
        var filterDeviceTypes = [];
        var deviceTypeMap = {}
        function getDeviceTypes(){
            var url =  myUrls.queryDeviceTypeByUser();
            utils.sendAjax(url,{},function(data){
                if(data.status == 0 ){
                    data.devicetypes.forEach(function(item,index){
                        deviceTypeMap[item.devicetypeid] = item.typename;
                        filterDeviceTypes.push({label:item.typename,value:item.devicetypeid});
                    });
                }
                initVue();
            })
        }

        getDeviceTypes();

        function initVue(){
            var yearTime = 60*60*24*365*1000;
            new Vue({
                el:"#app",
                data:{
                    years:"1年",
                    chargeStatus:'0',
                    queryType:'1',
                    overdueDate:DateFormat.addYear(new Date(),1),
                    isLifelong: true,
                    selectionArray:[],
                    activeType:"1",
                    modal : false,
                    loading:false,
                    userName:userName,
                    searchValue:userName,
                    isIncludeSub : false,
                    tHeight:100,
                    columns: [
                        {
                            type: 'selection',
                            width: 60,
                            align: 'center'
                        },
                        {
                            type: 'index',
                            width: 60,
                            align: 'center'
                        },
                        {
                            title: '管理账号',
                            key: 'username'
                        },
                        {
                            title: '设备序号',
                            key: 'deviceid'
                        },
                        {
                            title: '设备名称',
                            key: 'devicename'
                        },
                        {
                            title: '设备型号',
                            key: 'devicetype',
                            filters:filterDeviceTypes,
                            filterMultiple: false,
                            filterMethod (value, row) {
                                for(var i = 0 ; i < filterDeviceTypes.length; i++){
                                    var item = filterDeviceTypes[i];
                                    var label = item.label;
                                    if(row.devicetypeid == value){
                                        return true;
                                    }
                                }
                            }
                        },
                        {
                            width:110,
                            title: '充值状态',
                            render:function(h,params) {
                                var chargestatus = params.row.chargestatus;
                                var status = chargestatus == 1 ? "已充值" : "未充值" ;
                                return h('span', {}, status );
                            },
                            filters: [
                                {
                                    label: '已充值',
                                    value: 1
                                },
                                {
                                    label: '未充值',
                                    value: 0
                                }
                            ],
                            filterMultiple: false,
                            filterMethod (value, row) {
                                if (value == 1) {
                                    return row.chargestatus == 1;
                                } else if (value == 0) {
                                    return row.chargestatus == 0;
                                }
                            }
                        },
                        {
                            width:80,
                            title: '终身',
                            key: 'lifelong',
                            filters: [
                                {
                                    label: '是',
                                    value: 1
                                },
                                {
                                    label: '否',
                                    value: 0
                                }
                            ],
                            filterMultiple: false,
                            filterMethod (value, row) {
                                if (value === 1) {
                                    return row.lifelong == "是";
                                } else if (value === 0) {
                                    return row.lifelong == "否";
                                }
                            }
                        },
                        {
                            title: '过期时间',
                            width:120,
                            key: 'overduedate'
                        }
                    ],
                    tableData:[
                        // {
                        //     username:"abc",
                        //     deviceid:"13642818912",
                        //     devicename:"张飞",
                        //     lifelong:"是",
                        //     devicetype:'JT808',
                        //     devicetypeid:1,
                        //     overduedate:"2019-09-12",
                        //     chargestatus:1
                        // },
                    ],
                },
                computed:{
                    isDisabled:function(){
                        return this.userName !== 'admin';
                    }
                },
                watch: {
                    years:function(newVal){
                       this.overdueDate = DateFormat.addYear(new Date(),parseFloat(newVal)) ;
                    }
                },
                methods: {
                    handlerChargeDevices:function(){
                        if(this.selectionArray.length == 0){
                            this.$Message.error("请选择要充值的设备");
                            return;
                        };
                        var url = myUrls.chargeDevices() , me = this;
                        var data = {
                            chargestatus : Number(this.activeType),
                            isfree:this.isLifelong ? 1 : 0,
                            deviceids:[],
                            overduetime:DateFormat.format(this.overdueDate,'yyyy-MM-dd HH:mm:ss')
                        }
                        this.selectionArray.forEach(function (item) {
                            data.deviceids.push(item.deviceid);
                        });

                        utils.sendAjax(url,data,function (respData) { 
                            if(respData.status == 0){
                                me.modal = false;
                                me.$Message.success("充值成功:" + respData.successcount + "个");
                            }else{
                                me.$Message.error("充值失败");
                            }
                        });
                    },
                    handleQuery:function(){
                        if(this.searchValue.length == 0){
                            this.$Message.error("填写搜索内容");
                            return;
                        };
                        this.selectionArray  = [];
                        var data = {
                            querytype:Number(this.queryType), //1是 账号 2是设备
                            querykey:this.searchValue,
                            isquerysubaccount:this.isIncludeSub,
                            chargestatus:Number(this.chargeStatus)
                        };
                        this.loading = true;
                        var url = myUrls.queryChargeDeviceList() , me = this;
                        utils.sendAjax(url,data,function (respData) { 
                            me.loading = false;
                            if(respData.status == 0){
                               if(respData.devices.length){
                                    var resultArray = [];
                                    respData.devices.forEach(function (item,index) { 
                                        resultArray.push({
                                            username:item.creater,
                                            deviceid:item.deviceid,
                                            devicename:item.devicename,
                                            devicetype:deviceTypeMap[item.devicetype],
                                            devicetypeid:item.devicetype,
                                            lifelong:item.isfree == 1 ? '是' : '否',
                                            chargestatus:item.chargestatus,
                                            overduedate:DateFormat.longToDateStr(item.overduetime,0),
                                            overduetime:item.overduetime
                                        });
                                    });
                                    me.tableData = resultArray;
                               }else{
                                    me.$Message.error("没有搜索到内容");
                               }
                            }else{
                                me.$Message.error("没有该用户权限");
                            }
                        });
    
                    },
                    onSelection:function(result){
                        this.selectionArray = result;
                    },
                    getTableHeight:function(){
                        var winHeight = document.documentElement.clientHeight || document.body.clientHeight;
                        return winHeight - 70;
                    },
                },
                mounted () {
                    var me = this;
                    this.tHeight = this.getTableHeight();
                    window.onresize  = function(){
                        me.tHeight = me.getTableHeight();
                    }
                },
            })
        }

    </script>
</body>
</html>